<div class="layui-fluid"  id="app-vue" lay-title="首页">

    <div class="layui-row layui-col-space15">

        <index-show-data ref="indexShowData"/>

    </div>
    <div class="layui-row layui-col-space15">

        <div class="layui-col-xs12">
            <div class="layui-row layui-col-space15">


                <div class="layui-col-lg12">
                    <div class="layui-card">
                        <div class="layui-card-extra nepadmin-c-gray">
                            <span class="pointer"  :class="{'nepadmin-c-blue':'day'==date_mode}" @click="getSoldSwitch('day')">今日</span>&nbsp;&nbsp;
                            <span class="pointer"  :class="{'nepadmin-c-blue':'week'==date_mode}" @click="getSoldSwitch('week')">近7天</span>&nbsp;&nbsp;
                            <span class="pointer"  :class="{'nepadmin-c-blue':'month'==date_mode}" @click="getSoldSwitch('month')">近30天</span>&nbsp;&nbsp;
                            <span class="pointer"  :class="{'nepadmin-c-blue':'month60'==date_mode}" @click="getSoldSwitch('month60')">近60天</span>&nbsp;&nbsp;
                        </div>
                        <div class="layui-tab layui-tab-brief" lay-filter="index-chart">
                            <ul class="layui-tab-title">
                                <!--<li class="layui-this" @click="getSoldData('order')">销售额</li>-->
                                <li>统计</li>
                                <!--<li @click="getSoldData('user')">注册量</li>-->
                            </ul>
                            <div class="layui-tab-content" style="padding:0;">
                                <div class="layui-tab-item layui-show">
                                    <div id="index-echartLine" style="width: 100%;height:400px;"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>

    </div>

</div>

<script>
    layui.extend({
        indexShowData: 'views/components/indexShowData',
    }).use( ['admin',"indexShowData",'echarts',], function (admin,indexShowData,echarts) {

            // console.log(firstComponent)


            // console.log(firstComponent,myComponent)

            var app = new Vue({
                el: '#app-vue',
                components:{"index-show-data":indexShowData},
                data: {
                    echarts_list: [],
                    echart_mode:'order',
                    date_mode:'day',
                },
                created: function() {
                },
                mounted: function(){
                    //挂载
                    this.$nextTick(function(){
                        this.getSoldSwitch('day')
                    })
                },
                methods: {

                    _getSoldData:function(){
                        const that = this

                        admin.post({
                            url:'/admin/index/echarts'
                            ,data:{
                                mode:this.echart_mode,
                                date_mode:this.date_mode
                            }
                            ,success: function (res) {
                                var data = res.data||{}
                                that.createChart(data.name,data.series_data,data.x_axis_data)
                            }
                            ,complete:function(){
                            }
                        })
                    },
                    getSoldData:function(echart_mode){
                        this.echart_mode = echart_mode
                        this._getSoldData()
                    },
                    getSoldSwitch:function(date_mode){
                        this.date_mode = date_mode
                        this._getSoldData()
                    },



                    createChart:function(name, seriesData, xAxisData,options) {
                        options = options||{}
                        seriesData = seriesData||[]
                        xAxisData = xAxisData||[]
                        var yAxis_step = options.yAxis_step||2
                        var axisLabel_formatter = options.axisLabel_formatter|| '{value}'
                        var legend_data = []
                        for (var i=0;i<seriesData.length;i++){
                            var info = seriesData[i]
                            legend_data.push(info.name)
                        }
                        console.log(legend_data)
                        var option = {
                            tooltip: {
                                trigger: 'axis',
                                axisPointer: {
                                    type: 'cross'
                                }
                            },
                            legend: {
                                data: legend_data
                            },
                            xAxis: {
                                type: 'category',
                                data: xAxisData
                            },
                            yAxis: {
                                max: function (val) {
                                    return val.max + yAxis_step
                                },
                                min: function (val) {
                                    return val.min - yAxis_step
                                },
                                type: 'value',
                                axisLabel: {
                                    formatter: axisLabel_formatter
                                },
                                axisPointer: {
                                    snap: true
                                }
                            },
                            series: seriesData
                        }
                        echarts
                            .init(document.getElementById('index-echartLine'), 'blue')
                            .setOption(option)
                    }

                }
            })



        }
    )
</script>